<ng-template #defaultItemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
  <div class="treeview-node">
    <span class="tree-switcher" (click)="onCollapseExpand()" [ngClass]="{
      'cursor-pointer': item.children
    }">
      <i class="anticon anticon-caret-right" [ngClass]="{
        'tree-switcher_close': item.collapsed,
        'tree-switcher_open': !item.collapsed
      }" *ngIf="item.children" aria-hidden="true"></i>
    </span>
    <span class="tree-checkbox"  *ngIf="config.hasCheckBox">
      <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [nzIndeterminate]="item.indeterminate" [nzDisabled]="item.disabled"></label>
    </span>
    <span class="tree-node-content-wrapper">{{item.text}}</span>
    <span class="tree-node-add-button" *ngIf="!item.children" (click)="plus.emit(item)">
      <nz-tooltip [nzTitle]="(item.value && item.value.isTableData) ? '添加到数据' : '添加到图层'"><i class="anticon anticon-plus" nz-tooltip></i></nz-tooltip>
    </span>
    <span class="tree-node-menu" *ngIf="!item.children">
      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
        <span class="dropdown-link" nz-dropdown><i class="anticon anticon-ellipsis"></i></span>
        <ul nz-menu> 
          <li nz-menu-item nzDisable *ngIf="item.value && item.value.isTableData">添加到图层</li>
          <li nz-menu-item *ngIf="item.value && item.value.isTableData">添加到数据</li>
          <li nz-menu-item *ngIf="item.value && !item.value.isTableData">添加到图层</li>
          <li nz-menu-item nzDisable *ngIf="item.value && !item.value.isTableData">添加到数据</li>
        </ul>
      </nz-dropdown>
    </span>
  </div>
</ng-template>
<ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
  let-onFilterTextChange="onFilterTextChange">
  <div *ngIf="config.hasFilter" class="filter-container">
    <input class="filter-form-control" type="text" [placeholder]="i18n.getFilterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange($event)" />
    <span class="filter-button">
      <i class="anticon anticon-search"></i>
    </span>
  </div>
  <div *ngIf="hasFilterItems">
    <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row row-all">
      <div class="col-12">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [indeterminate]="item.indeterminate"
          />
          <label *ngIf="config.hasAllCheckBox" class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
            {{i18n.getAllCheckboxText()}}
          </label>
          <label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">
            <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" class="anticon" [class.anticon-arrows-alt]="item.collapsed"
              [class.anticon-shrink]="!item.collapsed"></i>
          </label>
        </div>
      </div>
    </div>
    <div *ngIf="config.hasDivider" class="dropdown-divider"></div>
  </div>
</ng-template>

<div class="treeview">
  <div class="treeview-header">
    <ng-template [ngTemplateOutlet]="headerTemplate || defaultHeaderTemplate" [ngTemplateOutletContext]="headerTemplateContext">
    </ng-template>
  </div>
  <div class="treeview-body" [ngSwitch]="hasFilterItems" [style.max-height.px]="maxHeight">
    <div *ngSwitchCase="true" class="treeview-container">
      <treeview-item *ngFor="let item of filterItems" [config]="config" [item]="item" [template]="itemTemplate || defaultItemTemplate"
        (checkedChange)="onItemCheckedChange(item, $event)">
      </treeview-item>
    </div>
    <div *ngSwitchCase="false" class="treeview-text">
      {{i18n.getFilterNoItemsFoundText()}}
    </div>
  </div>
</div>

